import { Swiper } from 'antd-mobile'
import React, { useState, useEffect } from 'react'
import "../Mine/Mine.less"
import { CapsuleTabs } from 'antd-mobile'
import { reqgetbanner, reqgetcoupon } from "../../http/api";

export default function Mine() {
  let arr = ["代金券1", "代金券2", "代金券3"]
  const [bannerlist, setbannerlist] = useState([])
  const [couponlist, setcouponlist] = useState([])
  const [n, setn] = useState(1)

  useEffect(() => {
    reqgetbanner().then(res => {
      if (res.data.code === 200) {
        setbannerlist(res.data.list)
      }
    })
    reqgetcoupon().then(res => {
      if (res.data.code === 200) {
       setcouponlist(res.data.list)
      }
    })
  }, [])
  
  const changeN=(n)=>{
    setn(n)
  }

  return (
    <div>
        <Swiper autoplay loop>
          {bannerlist ? bannerlist.map((item) => (
            <Swiper.Item key={item.id}>
              <img src={'http://localhost:1000' + item.img} alt="" />
            </Swiper.Item>
          )):null
          }
        </Swiper>
        <div>
        <CapsuleTabs onChange={(index) => changeN(index)}>
          {arr.map((item, index) => {
            return (
              <CapsuleTabs.Tab title={item} key={index} >
                {couponlist.length > 0 ? couponlist[n].content.map((i) => {
                  return (
                    <div className='moneyphice' key={i.id}>
                      <p>{i.title}</p>
                      <p>{i.begintime}</p>
                      <p>{i.description}</p>
                      <p>结束时间{i.endtime}</p>
                      <p>限额{i.limit_money}</p>
                    </div>
                  )
                }) : null}
              </CapsuleTabs.Tab>
            )
          })}
        </CapsuleTabs>
        </div>
      </div>
  )
}
